import { defineComponent, computed } from 'vue'
import { clsName } from './util'
import { COMPS_NAME } from '../src/util/constant'
import Plane from './plane'
import Bounce from './bounce'
import Wave from './wave'
import Pulse from './pulse'
import Flow from './flow'
import Grid from './grid'

export default defineComponent({
  name: COMPS_NAME.VE_LOADING,
  components: { Plane, Bounce, Wave, Pulse, Flow, Grid },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    overlayBackgroundColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.5)',
    },
    width: {
      type: [Number, String],
      required: true,
    },
    height: {
      type: [Number, String],
      required: true,
    },
    color: {
      type: String,
      required: true,
    },
    tip: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    // 计算 loading 样式
    const loadingClass = computed(() => {
      const { visible, fullscreen } = props
      return {
        [clsName('overlay')]: true,
        [clsName('fixed')]: fullscreen,
        [clsName('hide')]: !visible,
      }
    })

    // loading 样式
    const loadingStyle = computed(() => ({
      'background-color': props.overlayBackgroundColor,
    }))

    const spinProps = {
      props: {
        width: props.width,
        height: props.height,
        color: props.color,
      },
    }

    // 返回渲染函数
    return () => (
      <div
        style={loadingStyle.value}
        class={['ve-loading', loadingClass.value]}
      >
        <div class={clsName('spin-container')}>
          <div class={clsName('spin')}>
            {/* 动态组件 */}
            {props.name ? <component is={props.name} {...spinProps} /> : null}
          </div>
          <div style={{ color: props.color }} class={clsName('spin-tip')}>
            {props.tip}
          </div>
        </div>
      </div>
    )
  },
})
